<template>
  <div class="liveInfo">
    <div class="liveInfo_left" @click="goToHome">
      <van-image round width="40" height="40" src="../../../public/msg/avatar2.jpeg" fit="cover" />
    </div>
    <div class="liveInfo_center">
      <div class="title"> 小兵良品 </div>
      <div class="hot"> 22.75万 热度 </div>
    </div>
    <div class="liveInfo_right">
      <van-button round type="danger" @click="clickConcern">
        <van-icon name="plus" v-if="!isConcern" style="font-size: 16px; font-weight: 700;" />
        <span v-if="!isConcern" style="font-size: 16px;font-weight: 700;">关注</span>
        <span v-else style="font-size: 16px;font-weight: 700;">已关注</span>
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 跳转首页
function goToHome() {
  router.push('/home')
}
const isConcern = ref(false)
function clickConcern() {
  isConcern.value = !isConcern.value
}
</script>

<style lang="scss" scoped>
.liveInfo {
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
  color: #fff;
  display: flex;
  align-items: center;
  margin: 5px 0 0 5px;
  font-size: 16px;
  border-radius: 100px;
  padding: 3px 5px;

  .liveInfo_left {
    margin-right: 10px;
    display: flex;
  }

  .liveInfo_right {
    margin-left: 10px;
  }
}

:deep(.van-button) {
  height: 100%;
  line-height: 2;
}

:deep(.van-button--normal) {
  padding: 0 12px 0 10px;
}
</style>